<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
    var vm = new Vue({});
    //console.log(vm.$on,vm.$emit,vm.$off)
    //此方法用于在Vue实例上监听自定义事件
    //eventName 是监听的自定义事件的名称 eventHandler是事件触发时执行的自定义函数
    // vm.$on(eventName,eventHandler);
    const eventHandler1 = (...args)=>console.log('myEvent触发1',args)
    vm.$on('myEvent',eventHandler1);
    const eventHandler2 = (...args)=>console.log('myEvent触发2',args)
    vm.$on('myEvent',eventHandler2);
    //在Vue实例上触发一个事件，eventName是事件的名称，args是可选的参数
    //vm.$emit(eventName,[...args]);
    vm.$emit('myEvent','name','age');
    //移除自定义事件的事件监听器
    //vm.$off(eventName,eventHandler);
    //如果在移除监听 函数的时候传递了eventHandler，那么只会移除这一个
    vm.$off('myEvent',eventHandler1);
    //如果在移除监听函数的时候没有传递参数，那么会全部移除
    vm.$off('myEvent');
    //如果已经移除了自定义事件监听器，那么再发射事件就不会再执行事件回调函数eventHandler
    vm.$emit('myEvent','name2','age2');

    
</script>
</body>
</html>